<script>
import UText from "../../../../../uni_modules/uview-ui/components/u-text/u-text.vue";
import UFormItem from "../../../../../uni_modules/uview-ui/components/u-form-item/u-form-item.vue";
import {getElectricPlanAll, getPlanDetail as getPlanDetailApi} from "../../../../../api/common/power-station";
import {PLAN_TYPE} from "../../../../../constant";
import capacity from "./capacity/index.vue";
import moduleCard from "../../../../../components/business/module-card/index.vue";

const disc = {
  'zjs': 'assemblyList',
  'zhij': 'gridSupportList',
  'boxs': 'gridConnectionList',
  'inverters': 'inverterList',
}
export default {
  name: "index",
  computed: {
    PLAN_TYPE() {
      return PLAN_TYPE
    }
  },
  components: { UFormItem, UText, capacity, moduleCard },
  // inject: ['formData'],
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      id: '',
      // 方案规格
      materialList: {},
      // 是否显示组件弹窗
      visible: false,
      selectList: [],
      curType: '',
      curIndex: 0,
      assemblyList: [], // 组件列表
      gridConnectionList: [], // 并网箱列表
      inverterList: [], // 逆变器列表
      gridSupportList: [], // 并网支架列表
    }
  },
  mounted() {
    // if (this.$props.formData.id) {
    //   this.getPlanDetail(this.$props.formData.id);
    // }
    if (!this.assemblyList || this.assemblyList.length === 0) this.addModule('zjs', 0);
    if (!this.gridConnectionList || this.gridConnectionList.length === 0) this.addModule('boxs', 0);
    if (!this.inverterList || this.inverterList.length === 0) this.addModule('inverters', 0);
    if (!this.gridSupportList || this.gridSupportList.length === 0) this.addModule('zhij', 0);
    // this.addModule('zjs', 0);
    // this.addModule('zhij', 0);
    // this.addModule('inverters', 0);
    this.initMaterialList();
  },
  watch: {
    'formData.id': {
      handler: function(id) {
        if(!id) return;
        this.getPlanDetail(id);
      },
      deep: true,
    },
    assemblyList: {
      handler: function(val, oldVal) {
        this.handleItemList();
      },
      deep: true,
    },
    gridConnectionList: {
      handler: function(val, oldVal) {
        this.handleItemList();
      },
      deep: true,
    },
    inverterList: {
      handler: function(val, oldVal) {
        this.handleItemList();
      },
      deep: true,
    },
    gridSupportList: {
      handler: function(val, oldVal) {
        this.handleItemList();
      },
      deep: true,
    },
  },
  methods: {
    // 组装itemList
    handleItemList() {
      this.$props.formData.itemList = [
        ...this.assemblyList,
        ...this.gridConnectionList,
        ...this.inverterList,
        ...this.gridSupportList
      ];
    },
    // 获取方案详情
    async getPlanDetail(id) {
      getPlanDetailApi(id).then(({ data }) => {
        this.$props.formData.schemeType = data.schemeType;
        this.assemblyList = data.assemblyList;
        this.gridConnectionList = data.gridConnectionList;
        this.inverterList = data.inverterList;
        this.gridSupportList = data.gridSupportList;
      })
    },
    // 初始化方案规格
    async initMaterialList() {
      const { data } = await getElectricPlanAll();
      this.materialList = data;
      this.materialList.zjs.forEach(item => {
        item.name = item.materialSpecs
      })
      this.materialList.zhij.forEach(item => {
        item.name = item.materialSpecs
      })
      this.materialList.inverters.forEach(item => {
        item.name = item.materialSpecs
      })
      this.materialList.boxs.forEach(item => {
        item.name = item.materialSpecs
      })
    },
    showSelect(type, index) {
      this.curType = type;
      this.curIndex = index;
      this.selectList = this.materialList[type];
      this.visible = true;
    },
    // 添加模块 在某一行后面追加一个模块
    addModule(type, index) {
      this[disc[type]].splice(index + 1, 0, {
        itemTypeId: '',
        itemTypeName: '',
        num: '',
        spec: '',
      });
    },
    // 删除模块
    deleteModule(type, index) {
      this[disc[type]].splice(index, 1);
    },
    // 选择材料
    selectMaterial(item) {
      this[disc[this.curType]][this.curIndex].spec = item.materialSpecs;
      this[disc[this.curType]][this.curIndex].itemTypeId = item.materialTypeId;
      this[disc[this.curType]][this.curIndex].itemTypeName = item.materialTypeName;
      this[disc[this.curType]][this.curIndex].name = item.name;
      this.visible = false;
    },
  },
}
</script>

<template>
  <module-card title="方案信息">
    <capacity :formData="formData"/>
    <view class="group-title">设计安装容量</view>
    <view v-for="(assembly, index) in assemblyList" :key="index">
      <u-form-item
          label="组件"
          prop="userInfo.componentSpec"
          borderBottom
          ref="item1"
          :borderBottom="false"
      >
        <text v-if="assembly.spec">{{ assembly.spec }}</text>
      </u-form-item>
      <u-form-item
          label="组件数量"
          prop="userInfo.sex"
          borderBottom
          ref="item1"
      >
        {{assembly.num}}
      </u-form-item>
    </view>
    <view v-for="(inverter, index) in inverterList" :key="index">
      <u-form-item
          label="逆变器"
          borderBottom
          ref="item1"
          :borderBottom="false"
      >
        <text v-if="inverter.spec">{{ inverter.spec }}</text>
      </u-form-item>
      <u-form-item
          label="逆变器数量"
          prop="userInfo.sex"
          borderBottom
          ref="item1"
      >
        {{inverter.num}}
      </u-form-item>
    </view>
    <view v-for="(gridConnection, index) in gridConnectionList" :key="index">
      <u-form-item
          label="并网箱"
          borderBottom
          ref="item1"
          :borderBottom="false"
      >
        <text v-if="gridConnection.spec">{{ gridConnection.spec }}</text>
      </u-form-item>
      <u-form-item
          label="并网箱数量"
          prop="userInfo.sex"
          borderBottom
          ref="item1"
      >
        {{gridConnection.num}}
      </u-form-item>
    </view>
    <view v-for="(gridSupport, index) in gridSupportList" :key="index">
      <u-form-item
          label="支架"
          borderBottom
          ref="item1"
          :borderBottom="false"
      >
        <text v-if="gridSupport.spec">{{ gridSupport.spec }}</text>
      </u-form-item>
      <u-form-item
          label="支架数量"
          borderBottom
          ref="item1"
      >
        {{gridSupport.num}}
      </u-form-item>
    </view>
  </module-card>
</template>

<style scoped lang="scss">
.link-btn{
  color: var(--main-color);
  font-size: 14px;
}
.placeholder{
  color: rgb(192, 196, 204);
  font-size: 15px;
}
</style>
